<template>
	<view class="zwyListBox" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
	  <refresh ref="refresh" :isTop="isTop" :needVibrate="true" @isRefresh="isRefresh"></refresh>
	  <view style="width:100vw;height:100vh;">
	    <scroll-view @scroll="isScroll" class="zwyScroll"  style="height: 100%;" :scroll-x="scrollX" :scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
		  <view id="isTop"></view>
		  <slot name="before"></slot>
	      <slot></slot>
	      <view class="loadMoreBox" v-if="listLength > 8">
		  <loadMore @loadMore="lower1">
	        <view @click="lower1" class="loadMore">{{noMore == 1 ? '到底啦，别再拉了～' : (noMore == 0 ?'加载更多':'加载中')}}</view>
		  </loadMore>
	      </view>
	      <slot name="after"></slot>
	      </scroll-view>
	  </view>
	</view>
</template>

<script>
	import loadMore from './loadMore.vue';
	const util = require('../util/util.js');
	import refresh from './refresh.vue';
	export default {
		components:{refresh,loadMore},
		name:"zwyList",
		data() {
			return {
				toView:'',
				isTop:true
			};
		},
		props: {
			scrollX:{
				type:Boolean,
				default:false
			},
			listLength: {
				type: Number,
				default: 0
			},
			noMore: {
				type: Number,
				default: -1
			}
		
		},
		methods:{
				isScroll(e){
					if(e.detail.scrollTop <= 20) this.isTop = true;
					else this.isTop = false;
					this.$emit('isScroll',e.detail.scrollLeft);
				},
			  toTop: util.throttle(function(e) {
				this.toView = '';
				  setTimeout(()=>{
					  this.toView = 'isTop';
				  },100)
			  }, 600),
			    // 加载更多 util.throttle为防抖函数
			  lower1: util.throttle(function(e) {
			    if(this.noMore == 0) this.$emit('loadMore')
			  }, 600),
			  endAfter(){
			    this.$refs.refresh.endAfter();
			  },
			  rightEnd(){
				this.$refs.refresh && this.$refs.refresh.rightEnd();
			  },
			      // 刷新touch监听
			  refreshStart(e) {
			    this.$refs.refresh.refreshStart(e);
			  },
			  refreshMove(e) {
			    this.$refs.refresh.refreshMove(e);
			  },
			  refreshEnd(e) {
			    this.$refs.refresh.refreshEnd(e);
			  },
			  isRefresh() {
			    this.$emit('refresh');
			  }
		}
	}
</script>

<style>
.zwyListBox {
  width: 100vw;
  font-size: 28rpx;
  min-height: 100vh;
  overflow: hidden;
  color: #6B8082;
  position: relative;
  background-color: #FFFFFF;
}

.loadMore{
  background-color: #FFFFFF;
  padding: 0 23rpx;
  position: relative;
  z-index: 11;
}
.loadMoreBox::before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 90vw;
  height: 2rpx;
  background-color: #D9D9D9;
  margin: auto;
}
.loadMoreBox{
  position: relative;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
  font-size: 22rpx;
  color: #C3C3C3;
}
</style>
